<!-- 书籍分类 -->
<template>
    <div class="book-classify">
        <h4 style="text-align: center;">人文与社会科学</h4>
        <span class="book-classify-item" @click="handleClick">历史</span>
        <span class="book-classify-item" @click="handleClick1">哲学宗教</span>
        <span class="book-classify-item">社会学</span>
    </div>
    
    <div class="book-classify">
        <h4 style="text-align: center;">经济与管理</h4>
        <span class="book-classify-item">经济学</span>
        <span class="book-classify-item">管理学</span>
        <span class="book-classify-item">市场营销</span>
    </div>
    <div class="book-classify">
        <h4 style="text-align: center;">教育与心理</h4>
        <span class="book-classify-item">教育学</span>
        <span class="book-classify-item">心理学</span>
        <span class="book-classify-item">学前教育</span>
    </div>
    <div class="book-classify">
        <h4 style="text-align: center;">语言与文化</h4>
        <span class="book-classify-item">外国文学</span>
        <span class="book-classify-item">语言学习</span>
        <span class="book-classify-item">民俗学</span>
    </div>
    <div class="book-classify">
        <h4 style="text-align: center;">工程与技术</h4>
        <span class="book-classify-item">土木工程</span>
        <span class="book-classify-item">机械工程</span>
        <span class="book-classify-item">电子与电气</span>
    </div>
</template>
<script>
export default { 
    data() {
        return {
            
        }
    },
    methods: {
        handleClick() {
            this.$router.push('/book/classify')
        },
        handleClick1() {
            this.$router.push('/book/classify1')
        }
    }
}
</script>

<style>
.book-classify {
    margin-top: 30px;
    height: 60px;
    /* background-color: #e6f2ff; */
}

.book-classify-item {
    margin-left: 8px;
}
.book-classify span:hover{
    /*  */
    cursor: pointer;
    color: rgb(194, 224, 250);
}
</style>